<template>
	<view>
		<z-paging ref="paging" v-model="list" @query="page" :auto="false">
			<cu-custom slot="top" :bgColor="'bg-' + theme.themeColor" :isBack="true">
				<block slot="content">我的优惠券</block>
			</cu-custom>
			<scroll-view slot="top" scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index-1==tabCur?'cur text-'+ theme.themeColor:''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index-1">
						{{item}}
					</view>
				</view>
			</scroll-view>
			<view v-for="(item,index) in list">
				<coupon-info :couponInfo="item.couponInfo" :couponUser="item"></coupon-info>
			</view>
		</z-paging>
	</view>

</template>

<script>
	import {
		getPage
	} from '@/api/couponuser.js';
	import couponInfo from '@/components/coupon-info/index.vue';
	export default {
		components: {
			couponInfo
		},
		data() {
			return {
				theme: getApp().globalData.theme,
				list: [],
				tabList: ['全部', '未使用', '已使用', '已过期'],
				status: -1,
				tabCur: -1
			};
		},
		onLoad() {
			getApp().initPage().then(res => {
				this.$nextTick(function() {
					this.$refs.paging.reload();
				})
			})
		},
		methods: {
			/**
			 * 分页查询
			 */
			page(pageNo, pageSize) {
				getPage({
					current: pageNo,
					size: pageSize,
					descs: 'create_time',
					status: this.status == -1 ? '' : this.status,
				}).then(res => {
					this.$refs.paging.complete(res.data.records);
				});
			},
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.status = e.currentTarget.dataset.id;
				this.$refs.paging.reload();
			},
		}
	}
</script>

<style>
</style>
